<template>
  <div id="app">
    <nav>
      <Topbar  :key="topbarkey" />
      <Header  />
      <router-view @updateKey="getVal"/>
      <Footer />
      <Login v-if="isShowLoginModel" />
      <transition name="slide">
        <Toast  v-show="isShow"/>
      </transition> 
      <!-- <button @click="fn">请求响应</button> -->
    </nav>
  </div>

</template>
<script>
import Topbar from './components/Topbar';
import Header from './components/Hearder';
import Footer from './components/Footer';
import Login from './components/Login';
import Toast from './components/Toast';
import {JingPinAPI} from "@/request/api.js"
import { mapState } from 'vuex';
export default {
  components: { 
    Topbar,Header,Footer,Login,Toast
     },
     data() {
      return {
        topbarkey: 0,
      };
     },
 
  computed:{
    ...mapState({
      isShowLoginModel: (state) => state.showModel.isShowLoginModel,
      isShow: (state) => state.showToast.isShow,
    })
  },
  methods: {
    
    async fn() {
      let res = await JingPinAPI();
        console.log("app-res1:", res);
      let res2 = await JingPinAPI();
        console.log("app-res2:", res2);
    },
    getVal() {
      console.log("子传父--更新key,下一步组件重载");
      this.topbarkey++;
    }
  },
  watch:{
    "$route.path": {
      handler() {
        this.topbarkey++;
      }
    }
  }
}
</script>
<style lang="less">

// 进入过渡开始，离开过渡结束
.slide-enter,.slide-leave-to{
  opacity: 0;
}
// 过程中
.slide-enter-active,.slide-leave-active{
  transition: opacity .6s linear;
}

//  进入过渡结束，离开过渡开始
.slide-enter-to,.slide-leave {
  opacity: 1;
}
</style>
